//决定菜单栏渲染什么 
import {
    defineStore,
    storeToRefs
} from "pinia"
import {
    ref,
    readonly,
    watch
} from "vue"
// 引入管理员信息仓库
import {
    useUserStore
} from "./useUserStore.js"
// 超级管理员的菜单栏
const SuperMenuArr = [{
        id: 1,
        title: "概述",
        sign: "01",
        Icon: "summary",
        isSelected: true,
        path: "overview"
    },
    {
        id: 2,
        title: "管理员管理",
        sign: "02",
        Icon: "adminIcon",
        isSelected: false,
        path:"AdminMan"
    },
    {
        id: 3,
        title: '宿舍楼管理',
        sign: "03",
        Icon: "dormitory",
        isSelected: false,
        path:"DormitorybuilMan"
    },
    {
        id: 4,
        title: "楼层管理",
        sign: "04",
        Icon: "floor",
        isSelected: false,
        path:"FloorMan"
    },
    {
        id: 5,
        title: "宿舍管理",
        sign: "05",
        Icon: "roomIcon",
        isSelected: false,
        path:"RoomMan"
    },
    {
        id: 6,
        title: "学生管理",
        sign: "06",
        Icon: "student",
        isSelected: false,
        path:"StudentMan"
    },
    {
        id: 7,
        title: "记录查看",
        sign: "07",
        Icon: "record",
        isSelected: false,
        children: [{
                id: 8,
                title: "起床记录",
                sign: "0701",
                Icon: "getUpRecord",
                isSelected: false,
                path:"getUp"
            },
            {
                id: 9,
                title: "归宿记录",
                sign: "0702",
                Icon: "endResultRecord",
                isSelected: false,
                path:"endResult"
            },
            {
                id: 10,
                title: "清扫记录",
                sign: "0703",
                Icon: "cleanRecord",
                isSelected: false,
                path:"clean"
            }
        ]
    },
    {
        id: 10,
        title: "个人中心",
        sign: "08",
        isSelected: false,
        belong:"head", // 属于谁 默认属于侧边导航栏
        path: "PersonalCenter"
    },
    {
        id: 11,
        title: "修改密码",
        sign: "09",
        isSelected: false,
        belong:"head", // 属于谁 默认属于侧边导航栏
        path: "ChangePwd"
    },
    {
        id: 12,
        title: "修改头像",
        sign: "10",
        isSelected: false,
        belong:"head", // 属于谁 默认属于侧边导航栏
        path: "ModifyAvatar"
    },
    {
        id:13,
        title: "入住记录",
        sign: "13",
        Icon: "CheckInRecord",
        isSelected: false,
        path: "CheckInRecord"
    },
    {
        id: 14,
        title: "分配宿舍",
        sign: "14",
        Icon: "distribution",
        isSelected: false,
        path: "AllocateDormitories"
    },
    {
        id: 15,
        title: "维修",
        sign: "15",
        Icon:"RepairReport",
        isSelected: false,
        path: "RepairReport"
    },
    {
        id: 16,
        title:"维修记录",
        sign:"16",
        Icon: "MainRecords",
        isSelected: false,
        path: "MainRecords"

    }
]
// 管理员的菜单栏
const adminMenuArr = [{
        id: 1,
        title: "概述",
        sign: "01",
        Icon: "summary",
        isSelected: true,
        path: "overview"
    },
    {
        id: 2,
        title: '宿舍楼管理',
        sign: "02",
        Icon: "dormitory",
        isSelected: false,
        path:"DormitorybuilMan"
    },
    {
        id: 3,
        title: "楼层管理",
        sign: "03",
        Icon: "floor",
        isSelected: false,
        path:"FloorMan"
    },
    {
        id: 4,
        title: "宿舍管理",
        sign: "04",
        Icon: "roomIcon",
        isSelected: false,
        path:"RoomMan"
    },
    {
        id: 5,
        title: "学生管理",
        sign: "05",
        Icon: "student",
        isSelected: false,
        path:"StudentMan"
    },
    {
        id: 6,
        title: "记录查看",
        sign: "06",
        Icon: "record",
        isSelected: false,
        children: [{
                id: 7,
                title: "起床记录",
                sign: "0601",
                Icon: "getUpRecord",
                isSelected: false,
                path:"getUp"
            },
            {
                id: 8,
                title: "归宿记录",
                sign: "0602",
                Icon: "endResultRecord",
                isSelected: false,
                path:"endResult"

            },
            {
                id: 9,
                title: "清扫记录",
                sign: "0603",
                Icon: "cleanRecord",
                isSelected: false,
                path:"clean"
            }
        ]
    },
    {
        id: 10,
        title: "个人中心",
        sign: "07",
        isSelected: false,
        belong:"head", // 属于谁 默认属于侧边导航栏
        path: "PersonalCenter"
    },
    {
        id: 11,
        title: "修改密码",
        sign: "08",
        isSelected: false,
        belong:"head", // 属于谁 默认属于侧边导航栏
        path: "ChangePwd"
    },
    {
        id: 12,
        title: "修改头像",
        sign: "09",
        isSelected: false,
        belong:"head", // 属于谁 默认属于侧边导航栏
        path: "ModifyAvatar"
        
    }
    
]



export const useMenuStore = defineStore("useMenuStore", () => {
    const {readUserInfo} = storeToRefs(useUserStore())
    // 菜单栏渲染的数据
    const RenderingMenuRef = ref(readUserInfo.value.authentication === 1 ? adminMenuArr : SuperMenuArr);
    // 菜单栏渲染数据(只读)
    const readRenderingMenu = readonly(RenderingMenuRef);
    // 用户选中的数据面包屑导航
    const BreadcrumbsRef = ref([]);
    // 用户选中的数据面包屑导航(只读)
    const readBreadcrumbs = readonly(BreadcrumbsRef)
    // 选中的sign
    const selectSignRef = ref();
    // 选中的历史记录
    const historySelectRef = ref([]);
    // 选中的历史记录(只读)
    const readHistorySelect = readonly(historySelectRef);
  
    


    // 设置sign的选中值
    watch(RenderingMenuRef,(newValue) =>{
        initialSelect(RenderingMenuRef.value, (item) => {
            selectSignRef.value = item
        });
    },{
        immediate:true,
        deep:true
    })
    /**
     * 获取用户点击菜单栏的数据
     * @param {string} data 目标的sign值 
     */
    const getReactiveSelect = (data) => {
        let newArr = []
        const target = generateTarget(data.sign || data) // 得到目标值
        query(RenderingMenuRef.value, target, (item) => {
            newArr.push(item)
        });
        BreadcrumbsRef.value = newArr.reverse()
    }
    // 初始运行一下
    getReactiveSelect(selectSignRef.value)
    // 历史记录
    watch(BreadcrumbsRef, (newValue, oldValue) => {
        if (newValue[newValue.length - 1].children) {
            return
        }
        let start = false
        for (const key in historySelectRef.value) {
            if (historySelectRef.value[key].sign === newValue[newValue.length - 1].sign) {
                historySelectRef.value[key] = newValue[newValue.length - 1]
                start = true
            } else {
                historySelectRef.value[key].isSelected = false
            }
        }
        if (!start && historySelectRef.value.length < 7) {
            historySelectRef.value.push(newValue[newValue.length - 1])
        } else if (!start) {
            historySelectRef.value.splice(1, 1)
            historySelectRef.value.push(newValue[newValue.length - 1])
        }
    }, {
        immediate: true
    })
    /**
     * 删除指定的历史记录数据
     * @param {Object} data 目标对象 
     */
    const delHistorey = (data) => {
        const index = historySelectRef.value.indexOf(data)
        if (data.isSelected) {
            const select = historySelectRef.value[index - 1]
            getReactiveSelect(select);
        }
        historySelectRef.value.splice(index, 1)
    }
    /**
     * 用户选中历史记录中的数据
     * @param {Object} data 目标对象
     * 
     */
    const getSelectHistorey = (data) => {
        if(data.isSelected){
            return
        }
        const target = generateTarget(data.sign);
        let newArr = []
        query(RenderingMenuRef.value,target,(item) => {
            newArr.push(item)
        })
        BreadcrumbsRef.value = newArr.reverse()
    }

    /**
     * 头部菜单栏加入历史记录
     */
    // const addHeadHistory = (data) =>{
    //     selectSignRef.value.push(data)
    // }




    return {
        RenderingMenuRef, // 本地存储
        BreadcrumbsRef,// 本地存储
        historySelectRef,// 本地存储
        readRenderingMenu, // 菜单栏渲染(只读)
        selectSignRef, // 选中的sign 本地存储
        readBreadcrumbs, // 用户选中的数据面包屑导航(只读)
        readHistorySelect, // 历史记录(只读)
        getReactiveSelect, // 获取用户点击菜单栏的数据方法
        delHistorey, // 删除指定的历史记录数据方法
        getSelectHistorey // 用户选中历史记录中的数据的方法
    }
},{
    persist: {
        enabled: true,
        storage: sessionStorage,
    },
})
/**
 * 根据用户传入的数字生成目标值数组
 * @param {String} data 目标值
 * @returns 目标值数组
 */
const generateTarget = (data) => {
    let target = [];
    const length = data.length // 获取字符串的长度
    for (let i = 1; i <= length; i++) {
        if (i % 2 === 0) {
            target.push(data.substring(0, i));
        }
    }
    return target
}
/**
 * 根据目标值数组到达目标对象
 * @param {Array} arr 查找目标的数组
 * @param {Array} target 目标值数组
 * @param {Object} callback 回调函数里面有目标对象
 */
const query = (arr, target, callback) => {
    if (!arr || arr.length === 0 || target.length === 0) {
        return
    }
    for (const item of arr) {
        item.isSelected = false // 将arr中全部isSelected改为false
        if (item.sign === target[0]) {
            if (item.children) {
                target.splice(0, 1)
                query(item.children, target, callback)
            } else {
                item.isSelected = true
            }
            callback && callback(item)
        }
    }
}

/**
 * 初始选中的的值
 * @param {Array} arr 查找目标的数组
 * @param {Object} callback 回调函数里面有目标的sign值
 * @returns 
 */
const initialSelect = (arr, callback) => {
    if (!arr) {
        return
    }
    for (const item of arr) {
        if (item.isSelected) {
            callback(item)
            break;
        } else {
            initialSelect(item.children, callback)
        }
    }
    

}







